<template>
  <el-row :gutter="4"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"

  >
    <div class="block">
      <span class="demonstration">时间周期 : </span>
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        :picker-options="pickerOptions"
        format="yyyy-MM-dd HH"
        value-format="yyyy-MM-dd HH:00:00"
        @change="ccc"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
      <div id="analog-view-dialog_id" class="analog-view-dialog">
        模拟量
      </div>
    </div>
  </el-row>
</template>

<script>
  import echarts from 'echarts'

  export default {
    name: "AnalogView",
    data() {
      return {
        screenWidth: null,
        echarts: null,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2:[],
        loading:true
      }
    },
    methods: {
      initView(device_id, index) {
        this.echarts = echarts.init(document.getElementById('analog-view-dialog_id'));
        let p = this;
        p.device_id=device_id;
        p.index=index;
        let startTime = this.dateFilter(p.value2[0]);
        let endTime = this.dateFilter(p.value2[1]);
        this.$axios.post('pointDataRecordRoutes', {
          device_id: device_id,
          index: index,
          action_type: 'analogPointRecord',
          firstTime:startTime,
          secondTime:endTime
        }).then(function (response) {
          p.loading=false
          let data = response.data.data;
          let option = {
            backgroundColor: '#383b3e',
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              top: 'middle',
              left: '3%',
              right: '4%',
              bottom: '3%',
              height: '70%',
              containLabel: true
            },
            dataZoom: [{
              type: 'slider',
              show: true,
              height: 20,
              left: '10%',
              right: '10%',
              bottom: '2%',
              start: 50,
              end: 100,
              textStyle: {
                color: '#d4ffff',
                fontSize: 11,
              },
            }, {
              type: 'inside'
            }

            ],

            calculable: true,
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: data.xArr,
                axisTick: {
                  show: true //隐藏X轴刻度
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#90aada" //X轴文字颜色
                  }
                },
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: "",
                nameTextStyle: {
                  color: "#90aada"
                },

                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#90aada"
                  }
                },
                splitLine: {
                  lineStyle: {
                    type: 'dashed',
                    color: '#DDD'
                  }
                },
              }
            ],
            series: [
              {
                name: '当前数值',
                type: 'line',
                min: 10,
                max: 40,
                data: data.yArr,
                lineStyle: {
                  normal: {
                    width: 5,
                    color: {
                      type: 'linear',

                      colorStops: [{
                        offset: 0,
                        color: '#AAF487' // 0% 处的颜色
                      },
                        {
                          offset: 0.4,
                          color: '#47D8BE' // 100% 处的颜色
                        }, {
                          offset: 1,
                          color: '#47D8BE' // 100% 处的颜色
                        }
                      ],
                      globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(71,216,190, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetY: 7
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#AAF487',
                    borderWidth: 10,
                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                     shadowBlur: 100,*/
                    borderColor: "#AAF487"
                  }
                },
                smooth: true

              }
            ]
          };
          p.echarts.setOption(option);
        });

      },
      dateFilter:function (input) {
        var d = new Date(input);
        var year = d.getFullYear();
        var month = d.getMonth() <9 ? '0' + (d.getMonth() + 1) : '' + (d.getMonth() + 1);
        var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
        var hour = d.getHours();
        // var minutes = d.getMinutes();
        // var seconds = d.getSeconds();
        if(hour<10){
          hour = '0'+hour;
        }
        return  year+ '-' + month + '-' + day +' '+hour;
      },
      getformData(){
        let c=this;
        const end = new Date();
        const start = new Date();
        end.setTime(end.getTime() + 3600 * 1000);
        start.setTime(start.getTime() - 3600 * 1000);
        c.value2=[start,end];
      },
      ccc(){
        this.loading=true;
        this.initView(this.device_id, this.index)
      }
    },
    props: ['pointId'],
    created(){
      this.getformData();
    },
    mounted() {
      window.onresize = () => {
        this.screenWidth = document.body.clientWidth
      };
      //
      //this.getData();

    }
  }
</script>

<style lang="scss" scoped>
  .analog-view-dialog {
    background-color: #383b3e;
    height: 500px;
    .line-echart {
    }

  }
  .block{
    background-color: #383b3e;
    padding:20px 20px 10px 15px;
    .demonstration{
      color:#fff;
    }

  }


</style>
